<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>上传图片</title>
<script src="${staticResources }/js/ajax.js" type="text/javascript"></script>
<script type="text/javascript">
var uploadFlag = "";

function uploadPicture() {
	//选择文件
	var file1 = document.getElementById("file1");
	//file1.value = "";
	//file1.click();
	if (file1.value == "") return false;
	
	// TODO 判断文件类型
	
	//控件准备
	document.getElementById("btnUpload").disabled = true;
	document.getElementById("pUpload").style.visibility = "visible";
	
	//Ajax获取上传标记
	var params = "action=request_upload";
	params += "&beid=" + document.getElementById("beid").value;
	doAjax("${contextPath }/Books/UploadPicture", params, function(resp) {
		//返回值
		var rst = eval("(" + resp + ")");
		if (rst.status == 0 && rst.flag.length == 12) {
			uploadFlag = rst.flag;
			
			//提交表单
			document.getElementById("form1").action = "UploadPicture?flag=" + uploadFlag;
			document.getElementById("form1").submit();
			
			//轮询上传进度
			setTimeout("checkStatus()", 1000);
		} else {
			alert("请求失败！");
			
			document.getElementById("btnUpload").disabled = false;
			document.getElementById("pUpload").style.visibility = "hidden";
		}
	});
}

var checkingStatusCount = 0;
function checkStatus() {
	//Ajax提交请求
	var params = "action=query_status";
	params += "&flag=" + uploadFlag;
	doAjax("${contextPath }/Books/UploadPicture", params, function(resp) {
		//返回值
		var rst = eval("(" + resp + ")");
		if (rst.status == 0) {
			document.getElementById("progressBar1").value = 100;
			document.getElementById("txtProgress").innerHTML = "100";
			document.getElementById("pUploadDetail").style.visibility = "hidden";
			alert("上传完成！您可以继续上传新的图片。");
			document.getElementById("file1").value = "";
			document.getElementById("btnUpload").disabled = false;
			//window.location.href = "ShowBook?beid=${bookitem.beID }";
			location.reload();
		} else if (rst.status == 1) {
			//正在上传
			checkingStatusCount = -1;
			document.getElementById("progressBar1").value = rst.percentComplete;
			document.getElementById("txtProgress").innerHTML = rst.percentComplete;
			//设置相关信息
			document.getElementById("bytesProcessed").innerHTML = parseSize(rst.bytesProcessed);
			document.getElementById("sizeTotal").innerHTML = parseSize(rst.sizeTotal);
			document.getElementById("percentComplete").innerHTML = rst.percentComplete;
			document.getElementById("uploadRate").innerHTML = parseSize(rst.uploadRate);
			document.getElementById("timeInSeconds").innerHTML = rst.timeInSeconds;
			document.getElementById("leftRuntime").innerHTML = rst.leftRuntime;
			document.getElementById("pUploadDetail").style.visibility = "visible";
			setTimeout("checkStatus()", 1000);
		} else if (rst.status == 2) {
			//没有相关信息
			if (checkingStatusCount != -1)
				checkingStatusCount++;
			if (checkingStatusCount >= 20) {
				//上传超时
				alert("上传超时！请刷新网页然后重新上传！");
				return;
			}
			setTimeout("checkStatus()", 1000);
		} else if (rst.status == -3) {
			alert("数据库错误！");
		} else if (rst.status == -5) {
			alert("服务器错误！");
		} else {
			alert("错误代码：" + rst.status);
		}
	});
}
function onshelf(beid)
{
	var mode = "ajax";
	var params = "beid=" + encodeURIComponent(beid);
	params += "&mode=" + encodeURIComponent(mode);
	
	doAjax("BookOnshelf"
			,params,function(rst){
		var rst=eval('(' +rst+ ')');
		if(rst.status == 0) {
			location.href = "ShowBook?beid=${bookitem.beID }";
			window.alert("成功上架！");
		} else  { 
			window.alert(rst.message);
		} 
	});
}
function parseSize(arg0) {
	return arg0;
}
</script>
<link type="text/css" href="${staticResources}/css/uploadpic.css" rel="stylesheet" />

		<!-- Attach our CSS -->
	  	<link type="text/css" href="${staticResources}/css/reveal-modal.css" rel="stylesheet" />	
	  	
		<!-- Attach necessary scripts -->
		<script type="text/javascript" src="${staticResources}/js/jquery-1.4.4.min.js"></script>
		<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script> -->
		<script type="text/javascript" src="${staticResources}/js/jquery.reveal.js"></script>
		
		<style type="text/css">
			body { font-family: "HelveticaNeue","Helvetica-Neue", "Helvetica", "Arial", sans-serif; }
		</style>

</head>

<body style=" background: url('${staticResources}/image/greenbc.gif');">
<div id="header">
  <div id="hy">
    <c:if test="${user eq null }">
    <div id="logo">欢迎光临中国药科大学二手书交易平台!请<span><a href="${contextPath }/Account/Login">登录</a></span> 免费<span><a href="${contextPath }/Account/Register">注册</a></span></div>
    </c:if>
    <c:if test="${user ne null }">
    <div id="sc">
      <ul>
        <li><a href="${contextPath }/Account/Logout">注销</a></li>
        <li><a href="${contextPath }/Me?content=201">收藏夹</a></li>
        <li><a href="${contextPath }/Me">个人中心</a></li>
        <li>欢迎你，<b>${fn:escapeXml(user.nickName) }</b>！</li>
      </ul>
    </div>
    </c:if>
    
    
  </div>
  <div id="top" style=" background: url('${staticResources}/image/listcommentsbc_03.gif');">
      <div class="tx">
	    <dl>
	     <c:choose>
           <c:when test="${empty user.userPicture }">
             <img src="${staticResources}/image/userpics_none.jpg" width="132" height="132" alt="">
           </c:when>
           <c:otherwise>
             <img src="${userContents}/userpics/${user.userPicture }" width="132" height="132" alt="">
           </c:otherwise>
	     </c:choose>
	    </dl>
	  </div>
	  <div class="xx">
	     <dl class="nc">${fn:escapeXml(user.nickName)}</dl>
		 <dl class="degree">活跃度：${user.activityPoint}</dl>
		 <dl class="degree">信誉度：${user.creditPoint}</dl>
		 <dl class="degree">个性签名：${fn:escapeXml(user.signature)}</dl>
	  </div>
   </div>
 </div>
   <div id="nav" style=" background: url('${staticResources}/image/listcomments_07.gif');">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">新书上架</a></li>
      <li><a href="#">交易广场</a></li>
      <li><a href="#">拍卖中心</a></li>
      <li><a href="#">读者推荐</a></li>
      <li><a href="#">书籍论坛</a></li>
      <li><a href="#">新手指南</a></li>
    </ul>
   </div>
<!--头部结束-->

<div class="main"  style=" background: url('${staticResources}/image/viewcomment_background2.jpg');">
        <div class="text">
		      <dl>书名：${fn:escapeXml(bookitem.name)}</dl>
			  <dl>版本：${fn:escapeXml(bookitem.version)}</dl>
			  <dl>出版社：${fn:escapeXml(bookitem.publisher)}</dl>
			  <dl>主编：${fn:escapeXml(bookitem.chiefEditor)}</dl>
			  <dl>分类：${fn:escapeXml(bookitem.category.name)}</dl>
			  <dl>价格：￥${fn:escapeXml(bookitem.price)}</dl>
			  <dl>新旧程度：${fn:escapeXml(bookitem.conditionFriendlyName)}</dl>
			  <dl>笔记情况：${fn:escapeXml(bookitem.hasNoteFriendlyName)}</dl>
			  <dl>发布时间：${fn:escapeXml(bookitem.formattedLastSateChangedTime)}</dl>
		 </div>
		 <div class="pic">
		  <dl>
				<c:set var="bPicFlag" value="0" />
			 	<c:forEach var="thisPic" items ="${pics}">
			 		<c:set var="bPicFlag" value="1" />
			 		<img style="max-height: 136px; max-width: 108px;" src="${userContents}/bepics/${thisPic.fileName}.min.jpg" alt="">
			 	</c:forEach>
			 	<c:if test="${bPicFlag eq 0 }" >
			 		<img src="${staticResources}/image/bepics_none.jpg" width="108" height="136" alt="">
			 	</c:if>
		  </dl>
		 </div>
		 <div class="botton">
		      <div class="lbotn"><a href="#" data-animation="fade" data-reveal-id="myModal"><img src="${staticResources}/image/uploadpic_07.gif" width="100" height="40" alt=""></a></div>
			  <div class="rbotn"><a href="javascipt:void(0)" onclick = "onshelf(${bookitem.beID});return false;"><img src="${staticResources}/image/uploadpic_09.gif" width="110" height="40" alt=""></a><b><a href="ShowBook?beid=${bookitem.beID }">跳过>></a></b></div>
		 </div>
  
  
  
</div>
<!--中间部分结束-->

     <div class="bottom">中国药科大学版权所有</div>

<!--尾部结束-->

<div id="myModal" class="reveal-modal">
	<div style=" width:600px; height:290px; margin:0px 0px 0px -35px;" >
		<iframe id="target_upload" name="target_upload" src="" style="display: none"></iframe> 
		<form id="form1" name="form1" enctype="multipart/form-data" method="post" target="target_upload">
		  <input type="hidden" id="beid" name="beid" value="${bookitem.beID }" />
		  <input type="file" name="file1" id="file1" />
		  <input type="submit" name="btnUpload" id="btnUpload" onclick="uploadPicture();return false;" value="立刻上传" />
		</form>
		<p id="pUpload" style="visibility:hidden">
		<progress id="progressBar1" max="100">上传进度:<span id="txtProgress">0</span>%</progress>
		</p>
		<pre id="pUploadDetail" style="visibility:hidden">
		  已上传：<span id="bytesProcessed">123 Bytes</span> / <span id="sizeTotal">123 Bytes</span> ( <span id="percentComplete">100</span>% )
		  平均速度：<span id="uploadRate">123 Bytes</span>/s
		  已用时间：<span id="timeInSeconds">123</span>
		  预计剩余时间：<span id="leftRuntime">123</span>
		</pre>
	</div>
    <a class="close-reveal-modal">&#215;</a>
</div>

</body>

</html>